ExtJS Theming এবং Customization হল ExtJS অ্যাপ্লিকেশনের ইউজার ইন্টারফেসের ভিজ্যুয়াল এবং ব্যবহারযোগ্যতা কাস্টমাইজ করার গুরুত্বপূর্ণ উপাদান। ExtJS একটি শক্তিশালী থিমিং সিস্টেম প্রদান করে, যা ডিফল্ট লুক এবং ফিল পরিবর্তন করতে সহায়তা করে। আপনি আপনার অ্যাপ্লিকেশনের জন্য কাস্টম থিম তৈরি করতে পারেন, অথবা ডিফল্ট থিমের উপর পরিবর্তন আনতে পারেন।
এই গাইডে আমরা আলোচনা করব ExtJS Theming এবং Customization সম্পর্কে এবং কিভাবে আপনি আপনার অ্যাপ্লিকেশনে কাস্টম থিম এবং স্টাইল প্রয়োগ করতে পারেন।
ExtJS Theming আপনার অ্যাপ্লিকেশনের সম্পূর্ণ লুক এবং ফিল কাস্টমাইজ করতে ব্যবহৃত হয়। আপনি বিভিন্ন থিম নির্বাচন করে আপনার অ্যাপ্লিকেশনকে বিভিন্ন ডিজাইনে কনফিগার করতে পারেন, যেমন Classic, Neptune, Gray, এবং Crisp থিম।
ExtJS 6 এবং তার পরবর্তী সংস্করণে থিমিং সিস্টেম আরও উন্নত করা হয়েছে এবং এটি Sencha Themer টুল দিয়ে কাস্টম থিম তৈরি করতে সহায়ক। তবে, সাধারণভাবে থিম প্রয়োগ করার জন্য কিছু সাধারণ কনফিগারেশন ব্যবহার করা যেতে পারে।
Sencha Themer একটি ড্র্যাগ-এন্ড-ড্রপ টুল যা ব্যবহারকারীদের জন্য থিম তৈরি করা সহজ করে দেয়। আপনি Sencha Themer ব্যবহার করে প্রাক-নির্ধারিত থিমগুলি কাস্টমাইজ করতে পারেন অথবা একেবারে নতুন থিম তৈরি করতে পারেন।
app.json ফাইলের মাধ্যমে অ্যাপ্লিকেশনে প্রয়োগ করুন।Ext.application({
name: 'MyApp',
theme: 'neptune', // এখানে 'neptune' থিম ব্যবহার করা হচ্ছে
launch: function() {
console.log('Themed Application Launched');
}
});
এখানে, theme: 'neptune' কনফিগারেশনটি নির্ধারণ করে যে অ্যাপ্লিকেশনটি Neptune থিমে লোড হবে।
আপনি একটি Custom Theme তৈরি করতে পারেন যা আপনার প্রয়োজনীয়তা অনুযায়ী কাস্টমাইজড হয়।
{
"name": "custom-theme",
"extends": "ext-theme-neptune",
"variables": {
"primary-color": "#FF5733",
"secondary-color": "#1A1A1A"
}
}
এখানে, primary-color এবং secondary-color কাস্টমাইজ করা হয়েছে, যা আপনার অ্যাপ্লিকেশনের বিভিন্ন UI উপাদানের রঙ পরিবর্তন করবে।
Customization এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনটির ইউজার ইন্টারফেসের আউটলুক এবং আচরণ কাস্টমাইজ করতে পারেন। ExtJS আপনাকে বিভিন্ন CSS, SASS, LESS, এবং JavaScript ফাইলের মাধ্যমে স্টাইল এবং ফাংশনালিটি কাস্টমাইজ করার অনুমতি দেয়।
যদি আপনি কোনো নির্দিষ্ট উপাদান বা থিমের স্টাইল পরিবর্তন করতে চান, তবে কাস্টম CSS বা SASS ব্যবহার করতে পারেন।
কাস্টম CSS ফাইল প্রয়োগ করার উদাহরণ:
/* custom-style.css */
.x-btn {
background-color: #FF5733 !important; /* বাটনের ব্যাকগ্রাউন্ড রঙ পরিবর্তন */
color: white !important; /* বাটনের টেক্সট রঙ পরিবর্তন */
}
.x-panel-header {
background-color: #1A1A1A !important; /* প্যানেল হেডারের ব্যাকগ্রাউন্ড রঙ */
}
এখন, custom-style.css ফাইলটি আপনার অ্যাপ্লিকেশনের HTML বা JavaScript ফাইলের মধ্যে যুক্ত করতে পারেন।
<link rel="stylesheet" type="text/css" href="custom-style.css">
আপনি custom components তৈরি করতে পারেন যা নির্দিষ্ট উপাদানগুলোকে নতুনভাবে ডিজাইন বা কাস্টমাইজ করবে।
Custom Component উদাহরণ:
Ext.define('MyApp.view.CustomButton', {
extend: 'Ext.button.Button',
xtype: 'custombutton',
text: 'Click Me!',
style: {
backgroundColor: '#FF5733',
color: '#fff',
fontSize: '16px'
},
handler: function() {
alert('Custom Button Clicked!');
}
});
এখানে, একটি custom button তৈরি করা হয়েছে, যার স্টাইল এবং ফাংশন কাস্টমাইজ করা হয়েছে।
আপনি SASS/LESS ফাইলের মাধ্যমে থিমের বিভিন্ন ভ্যারিয়েবল কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, SASS ব্যবহার করে আপনি সহজেই থিমের রঙ বা স্টাইল পরিবর্তন করতে পারেন।
// custom-theme.scss
$base-color: #FF5733;
$button-background: $base-color;
@import "ext-theme-neptune";
এখানে, $base-color এবং $button-background ভ্যারিয়েবল কাস্টমাইজ করা হয়েছে, যা থিমের বিভিন্ন উপাদানে প্রভাব ফেলবে।
Ext.override for Customizing ComponentsExt.override ব্যবহার করে আপনি ExtJS এর ডিফল্ট কম্পোনেন্টের আচরণ পরিবর্তন করতে পারেন।
Ext.override(Ext.button.Button, {
handler: function() {
console.log('Custom Handler');
// ডিফল্ট হ্যান্ডলারকে ওভাররাইড করা হচ্ছে
}
});
এখানে, Ext.override ব্যবহার করে Button কম্পোনেন্টের হ্যান্ডলার কাস্টমাইজ করা হয়েছে।
আপনি grid column renderer কাস্টমাইজ করতে পারেন যাতে গ্রিডের কলামগুলিতে কাস্টম লজিক প্রয়োগ করা যায়।
Ext.create('Ext.grid.Panel', {
store: myStore,
columns: [{
text: 'Name',
dataIndex: 'name',
renderer: function(value) {
return '<b>' + value + '</b>'; // নামটিকে বোল্ড করা
}
}]
});
এখানে, renderer ব্যবহার করে গ্রিডের কলামে কাস্টম HTML স্টাইল প্রয়োগ করা হয়েছে।
Ext.override এবং grid column renderer ব্যবহার করে আপনি ExtJS এর ডিফল্ট কম্পোনেন্টের আচরণ কাস্টমাইজ করতে পারেন।ExtJS এর থিমিং এবং কাস্টমাইজেশন ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেস এবং আচরণ পুরোপুরি কাস্টমাইজ করতে পারেন, যা আপনার প্রোজেক্টের জন্য উপযুক্ত হবে।
Theming হল ExtJS-এ অ্যাপ্লিকেশনের ডিজাইন এবং লুক অ্যান্ড ফিল কাস্টমাইজ করার একটি শক্তিশালী বৈশিষ্ট্য। ExtJS বিভিন্ন বিল্ট-ইন থিম সরবরাহ করে, তবে আপনি কাস্টম থিম তৈরি করতে পারেন যা আপনার অ্যাপ্লিকেশনের ব্র্যান্ডিং এবং ডিজাইন স্টাইল অনুসারে উপযুক্ত। Theming ব্যবস্থাপনা অ্যাপ্লিকেশনকে আরও ইন্টারফেস এবং ইউজার ফ্রেন্ডলি করে তোলে।
এখানে, আমরা ExtJS থিমিং কীভাবে কাজ করে এবং কিভাবে একটি কাস্টম থিম তৈরি করতে হয়, তা নিয়ে আলোচনা করব।
ExtJS তে থিম দুটি ভাগে বিভক্ত:
Neptune, Classic, Crisp, Dark, ইত্যাদি। এগুলি সাধারণ অ্যাপ্লিকেশনগুলির জন্য প্রস্তুত থিম যা বিভিন্ন ধরনের UI উপাদান (button, panel, grid, etc.) কাস্টমাইজ করে।ExtJS ডিফল্ট থিম ব্যবহারের জন্য আপনি Sencha Cmd টুল ব্যবহার করে অ্যাপ্লিকেশন সেটআপ করতে পারেন।
আপনি যদি ডিফল্ট Crisp থিম ব্যবহার করতে চান, তাহলে আপনার অ্যাপ্লিকেশন কনফিগারেশন ফাইলে এই কোডটি যুক্ত করতে হবে:
Ext.application({
name: 'MyApp',
appFolder: 'app',
theme: 'crisp', // Crisp theme ব্যবহার হচ্ছে
launch: function() {
Ext.create('Ext.panel.Panel', {
title: 'Themed Panel',
width: 400,
height: 300,
html: 'This panel uses the Crisp theme!',
renderTo: Ext.getBody()
});
}
});
এখানে theme: 'crisp' এই প্রপার্টি দিয়ে আপনি Crisp থিমটি অ্যাপ্লিকেশনে অ্যাপ্লাই করেছেন।
আপনি যদি একটি কাস্টম থিম তৈরি করতে চান, তবে আপনাকে কিছু অতিরিক্ত স্টেপ অনুসরণ করতে হবে:
প্রথমে, Sencha Cmd টুল ব্যবহার করে একটি নতুন থিম তৈরি করতে হবে।
sencha generate theme MyCustomTheme
এই কমান্ডটি MyCustomTheme নামে একটি নতুন থিম তৈরি করবে।
আপনার তৈরি করা থিম ফোল্ডারে গিয়ে, থিমের কনফিগারেশন ফাইল এবং CSS ফাইলগুলো কাস্টমাইজ করতে হবে।
button, panel, textfield, ইত্যাদি) কাস্টমাইজ করতে পারবেন।উদাহরণ:
// Button এর কাস্টম স্টাইল
$button-background: #4CAF50;
$button-color: white;
button {
background-color: $button-background;
color: $button-color;
}
থিম কনফিগারেশন সম্পূর্ণ হলে, Sencha Cmd ব্যবহার করে থিম প্রস্তুত করতে হবে।
sencha package generate
এটি আপনার থিম প্রস্তুত করে এবং অ্যাপ্লিকেশন ফোল্ডারে থিম ফাইলগুলো অন্তর্ভুক্ত করবে।
আপনি যে কাস্টম থিম তৈরি করেছেন, তা আপনার অ্যাপ্লিকেশনে ব্যবহার করতে হলে, অ্যাপ্লিকেশন কনফিগারেশনে theme প্রপার্টি ব্যবহার করে কাস্টম থিমটি অন্তর্ভুক্ত করতে হবে।
Ext.application({
name: 'MyApp',
appFolder: 'app',
theme: 'MyCustomTheme', // কাস্টম থিম ব্যবহার হচ্ছে
launch: function() {
Ext.create('Ext.panel.Panel', {
title: 'Custom Themed Panel',
width: 400,
height: 300,
html: 'This panel uses the custom theme!',
renderTo: Ext.getBody()
});
}
});
এখানে, theme: 'MyCustomTheme' এই প্রপার্টি দিয়ে আপনি আপনার কাস্টম থিমটি অ্যাপ্লিকেশনে অ্যাপ্লাই করেছেন।
Sencha Themer হল একটি GUI টুল, যা ExtJS অ্যাপ্লিকেশনের জন্য থিম তৈরি ও কাস্টমাইজ করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি UI উপাদানগুলির লুক এবং ফিল পরিবর্তন করতে পারেন, যেমন বাটন, গ্রিড, প্যানেল ইত্যাদি, এবং কোড লেখার প্রয়োজন ছাড়াই থিম তৈরি করতে পারেন।
Sencha Themer আপনাকে একটি ইন্টারেকটিভ UI প্রদান করে, যেখানে আপনি বিভিন্ন থিম কাস্টমাইজ করতে পারবেন।
Classic, Neptune, Crisp, এবং Dark বিভিন্ন ধরণের স্টাইল প্রিভিউ প্রদান করে, যা অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহার করা যেতে পারে।ExtJS তে থিমিং ব্যবস্থাপনা অ্যাপ্লিকেশন ডিজাইনকে কাস্টমাইজ করার জন্য খুবই শক্তিশালী একটি টুল, যা ইউজারদের আরও ভালো অভিজ্ঞতা দেয় এবং অ্যাপ্লিকেশনের লুক অ্যান্ড ফিলের মান উন্নত করে।
ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক, যা কাস্টম থিম তৈরি করার জন্য CSS এবং SASS সাপোর্ট প্রদান করে। থিমিং ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের ডিজাইন এবং ভিজ্যুয়াল স্টাইল কাস্টমাইজ করতে পারেন। থিমিং সিস্টেমটি ব্যবহার করে, আপনি অ্যাপ্লিকেশনের ভিজ্যুয়াল উপাদানগুলো যেমন রঙ, টাইপোগ্রাফি, বর্ডার, প্যাডিং ইত্যাদি কাস্টমাইজ করতে পারবেন। CSS এবং SASS ব্যবহার করে থিম তৈরি করা, বিশেষত বড় অ্যাপ্লিকেশনে স্টাইলিং নিয়ন্ত্রণের ক্ষেত্রে একটি কার্যকরী উপায়।
ExtJS ফ্রেমওয়ার্কের জন্য কাস্টম CSS ব্যবহার করে থিম তৈরি করা খুবই সহজ। ExtJS তে ext-theme-classic বা ext-theme-material এর মতো ডিফল্ট থিম পাওয়া যায়, তবে আপনি নিজস্ব থিম তৈরি করতে পারেন যা আপনার অ্যাপ্লিকেশনের ডিজাইনের সাথে মিলে যাবে।
কাস্টম CSS ফাইল তৈরি করা: আপনার অ্যাপ্লিকেশনে একটি নতুন CSS ফাইল তৈরি করুন যেখানে আপনি বিভিন্ন UI কম্পোনেন্টের স্টাইল কাস্টমাইজ করবেন।
custom-theme.css উদাহরণ:
.x-panel-body {
background-color: #f4f4f4; /* প্যানেল ব্যাকগ্রাউন্ড */
}
.x-btn {
background-color: #007BFF; /* বাটনের ব্যাকগ্রাউন্ড রঙ */
color: white; /* টেক্সট রঙ */
border-radius: 5px; /* বর্ডার রাউন্ডিং */
}
.x-btn:hover {
background-color: #0056b3; /* হোভার রঙ */
}
.x-field-label {
font-weight: bold; /* ইনপুট ফিল্ডের লেবেল স্টাইল */
color: #333;
}
CSS ফাইলকে লিঙ্ক করা: আপনার index.html ফাইলে CSS ফাইলটিকে লিঙ্ক করুন।
<link rel="stylesheet" type="text/css" href="css/custom-theme.css">
কাস্টম ক্লাস ব্যবহার করা: আপনার কম্পোনেন্টের স্টাইল কাস্টমাইজ করতে আপনি কাস্টম CSS ক্লাসগুলি ব্যবহার করতে পারেন।
Ext.create('Ext.button.Button', {
text: 'Click Me',
cls: 'x-btn custom-button', // কাস্টম ক্লাস যোগ করা
renderTo: Ext.getBody()
});
SASS (Syntactically Awesome Stylesheets) হল একটি শক্তিশালী CSS প্রিপ্রসেসর যা স্টাইলশিট লেখার সময় আরও কার্যকরী এবং মডুলার কোড তৈরি করতে সাহায্য করে। ExtJS SASS ব্যবহার করে থিম তৈরি করার জন্য অনেক উপায় প্রদান করে।
SASS ফাইল সেটআপ: প্রথমে, আপনাকে SASS ফাইলগুলির জন্য একটি কনফিগারেশন তৈরি করতে হবে। ext.scss ফাইল তৈরি করুন যেখানে ExtJS এর থিম কাস্টমাইজ করা হবে।
ext.scss ফাইলের উদাহরণ:
// Import ExtJS default variables
@import 'extjs/theme-material/resources/theme-material-all';
// কাস্টম রঙ এবং অন্যান্য ভ্যারিয়েবল সেট করুন
$primary-color: #FF5733; // পছন্দসই প্রাইমারি রঙ
$secondary-color: #333333; // সেকেন্ডারি রঙ
// UI কম্পোনেন্টের কাস্টমাইজেশন
.x-btn {
background-color: $primary-color;
color: white;
border-radius: 4px;
&:hover {
background-color: darken($primary-color, 10%);
}
}
.x-panel-body {
background-color: lighten($secondary-color, 30%);
}
SASS কম্পাইল করা: SASS কোডকে CSS তে রূপান্তর করতে আপনাকে SASS কম্পাইল করতে হবে। আপনি Node.js, Gulp, বা Webpack ব্যবহার করে এটি করতে পারেন।
যদি আপনি Node.js ব্যবহার করেন:
প্রথমে node-sass ইনস্টল করুন:
npm install -g node-sass
এরপর SASS ফাইলটি CSS এ কম্পাইল করুন:
node-sass ext.scss custom-theme.css
CSS লোড করা: আপনার অ্যাপ্লিকেশন index.html ফাইলে কম্পাইল করা CSS ফাইলটি লোড করুন:
<link rel="stylesheet" type="text/css" href="css/custom-theme.css">
ExtJS থিম কাস্টমাইজ করার জন্য Sencha Cmd ব্যবহার করা যায়। Sencha Cmd একটি শক্তিশালী টুল যা ExtJS অ্যাপ্লিকেশন তৈরি, কম্পাইল এবং ডিপ্লয় করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি কাস্টম থিম তৈরি করতে পারেন এবং সেটি এক্সটিজেএস প্রজেক্টে ব্যবহার করতে পারবেন।
Sencha Cmd দিয়ে থিম তৈরি: আপনি Sencha Cmd ব্যবহার করে একটি কাস্টম থিম তৈরি করতে পারেন। এটি আপনাকে থিমের জন্য প্রাথমিক ফাইল এবং কাঠামো প্রদান করবে।
কাস্টম থিম তৈরি করতে কমান্ড:
sencha generate theme MyCustomTheme
ExtJS থিমিং একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য সিস্টেম, যা CSS এবং SASS এর মাধ্যমে আপনার অ্যাপ্লিকেশনের ডিজাইন এবং ইউজার ইন্টারফেস স্টাইল কাস্টমাইজ করতে সহায়ক। CSS ফাইল ব্যবহার করে সহজেই থিম কাস্টমাইজ করা যায়, তবে SASS ব্যবহার করে আরও শক্তিশালী এবং মডুলার থিম তৈরি করা যায়, যা বড় অ্যাপ্লিকেশনগুলিতে ব্যবহার করা যায়। Sencha Cmd ব্যবহার করে আপনি কাস্টম থিম তৈরি এবং রক্ষণাবেক্ষণ করতে পারেন।
ExtJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা উন্নত ইউজার ইন্টারফেস (UI) তৈরির জন্য ব্যবহৃত হয়। এর মধ্যে একটি দুর্দান্ত থিমিং সিস্টেম রয়েছে যা ডেভেলপারদের তাদের অ্যাপ্লিকেশনটির চেহারা ও অনুভূতি কাস্টমাইজ করতে দেয়। ExtJS আপনাকে pre-built themes ব্যবহার করার সুবিধা দেয় এবং আপনি চাইলে custom themes তৈরি করেও অ্যাপ্লিকেশনটির ডিজাইন কাস্টমাইজ করতে পারেন।
ExtJS তে অনেক প্রি-বিল্ট থিম উপলব্ধ রয়েছে, যা আপনি সরাসরি ব্যবহার করতে পারেন। সাধারণত, Sencha Themer এবং ExtJS Theme ডেভেলপমেন্ট টুলস ব্যবহার করে থিম পরিবর্তন করা হয়।
classic থিম: একটি প্রথাগত ডেস্কটপ-ভিত্তিক ডিজাইন।modern থিম: আধুনিক ডিজাইন যা মোবাইল এবং ট্যাবলেট-ভিত্তিক ইউজার ইন্টারফেসের জন্য উপযুক্ত।app.js ফাইলে, আপনি সহজেই থিম সিলেক্ট করতে পারেন:
Ext.application({
name: 'MyApp',
requires: ['Ext.MessageBox'],
// থিম নির্বাচন করা
theme: 'classic', // বা 'modern'
launch: function() {
Ext.create('Ext.MessageBox', {
title: 'Hello ExtJS!',
message: 'This is a pre-built theme example.',
buttons: Ext.MessageBox.OK
});
}
});
এখানে, theme কনফিগারেশনে "classic" বা "modern" থিম ব্যবহার করা হয়েছে। ExtJS ফ্রেমওয়ার্ক এই থিমগুলো সরাসরি অ্যাপ্লিকেশনে প্রয়োগ করবে।
ExtJS তে কাস্টম থিম তৈরি করার জন্য SASS (Syntactically Awesome Stylesheets) ব্যবহার করা হয়। SASS ব্যবহার করে আপনি থিমের স্টাইল কাস্টমাইজ করতে পারেন, যেমন সঠিক রং, টাইপোগ্রাফি, বর্ডার, শ্যাডো ইত্যাদি।
Sencha Cmd দিয়ে প্রজেক্ট তৈরি:
sencha generate app MyApp /path/to/myapp
কাস্টম থিম ফোল্ডার স্ট্রাকচার:
/app
/sass
/themes
/myCustomTheme
_variables.scss
_buttons.scss
_layout.scss
_variables.scss:
$primary-color: #4CAF50; // কাস্টম রঙ নির্ধারণ
$secondary-color: #FF5722; // সেকেন্ডারি রঙ
_buttons.scss:
.x-btn {
background-color: $primary-color;
color: white;
}
sencha কমান্ড ব্যবহার করতে হবে। এটি SASS ফাইলগুলি কম্পাইল করে এবং একটি .css ফাইল তৈরি করবে।Sencha Cmd দিয়ে থিম তৈরি:
sencha generate theme myCustomTheme
app.json ফাইলে থিমটি রেফারেন্স করতে হবে।app.json ফাইলে কাস্টম থিম প্রয়োগ:
{
"name": "MyApp",
"theme": "myCustomTheme",
"requires": [
"Ext.MessageBox"
],
"launch": function () {
Ext.create('Ext.MessageBox', {
title: 'Custom Theme Example',
message: 'This is a custom theme example using SASS.',
buttons: Ext.MessageBox.OK
});
}
}
এখানে, theme কনফিগারেশনে "myCustomTheme" রেফারেন্স করা হয়েছে, যা পূর্বে তৈরি করা কাস্টম থিম।
Sencha Themer হল একটি গ্রাফিক্যাল ইউজার ইন্টারফেস (GUI) টুল যা ডেভেলপারদের এবং ডিজাইনারদের ExtJS অ্যাপ্লিকেশনের জন্য কাস্টম থিম ডিজাইন করতে সাহায্য করে। Sencha Themer ব্যবহার করে আপনি সহজেই রং, স্টাইল, এবং থিমের অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।
classic এবং modern থিম।এভাবে, ExtJS তে থিমিং ব্যবস্থার মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরও সুন্দর, ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব করা সম্ভব।
ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা রেসপন্সিভ ডিজাইন এবং মিডিয়া কুয়েরি (Media Queries) সমর্থন করে। এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে বিভিন্ন ডিভাইস এবং স্ক্রীন সাইজের জন্য অটোমেটিকভাবে রিসাইজ এবং অ্যাডজাস্ট করতে পারেন। রেসপন্সিভ ডিজাইন ফিচারের মাধ্যমে, ExtJS অ্যাপ্লিকেশনগুলো মোবাইল, ট্যাবলেট এবং ডেস্কটপ প্ল্যাটফর্মের জন্য উপযুক্ত হয়ে ওঠে।
রেসপন্সিভ ডিজাইন হল এমন একটি ডিজাইন কৌশল, যেখানে ওয়েব পেজ বা অ্যাপ্লিকেশনটি বিভিন্ন স্ক্রীন সাইজ এবং রেজোলিউশনে ভালোভাবে কাজ করে। ExtJS তে, responsiveConfig এবং responsive কনফিগারেশন ব্যবহার করে অ্যাপ্লিকেশন তৈরি করা যায় যা বিভিন্ন ডিভাইসে সঠিকভাবে কাজ করবে।
responsiveConfig কনফিগারেশন ব্যবহারresponsiveConfig একটি কনফিগারেশন অবজেক্ট যা আপনার কম্পোনেন্ট বা প্যানেলের ডিজাইনকে স্ক্রীনের সাইজ অনুসারে পরিবর্তন করতে সাহায্য করে।
Ext.create('Ext.panel.Panel', {
title: 'Responsive Panel',
width: 500,
height: 300,
html: 'Resize the window to see the panel resize!',
responsiveConfig: {
'width < 500': {
html: 'This panel is on a small screen.'
},
'width >= 500': {
html: 'This panel is on a large screen.'
}
},
renderTo: Ext.getBody()
});
এখানে:
responsiveConfig: স্ক্রীন সাইজের ভিত্তিতে কনফিগারেশন আপডেট করা হচ্ছে।width < 500: যদি স্ক্রীন এর প্রস্থ 500px এর কম হয়, তাহলে প্যানেলের HTML আপডেট হবে।width >= 500: যদি স্ক্রীন এর প্রস্থ 500px বা তার বেশি হয়, তাহলে অন্য HTML দেখানো হবে।responsive প্রপার্টি উদাহরণ:Ext.create('Ext.panel.Panel', {
title: 'Responsive Layout Example',
width: 400,
height: 300,
layout: 'vbox',
items: [{
xtype: 'panel',
html: 'This panel adjusts its content based on screen size.',
flex: 1
}],
responsive: true, // এটি প্যানেলকে রেসপন্সিভ করে তোলে
renderTo: Ext.getBody()
});
responsive: true: এটি কম্পোনেন্ট বা প্যানেলকে রেসপন্সিভ করে তোলে, যা স্ক্রীন সাইজ পরিবর্তিত হলে ডাইনামিকভাবে কন্টেন্ট অ্যাডজাস্ট করবে।
Media Queries হল CSS এর একটি বৈশিষ্ট্য, যা স্ক্রীনের সাইজ, রেজোলিউশন, অরিয়েন্টেশন ইত্যাদির উপর ভিত্তি করে স্টাইল পরিবর্তন করার অনুমতি দেয়। ExtJS তে আপনি মিডিয়া কুয়েরি কনফিগারেশন ব্যবহার করে স্ক্রীন সাইজ অনুসারে উপাদানগুলির স্টাইল এবং আচরণ নিয়ন্ত্রণ করতে পারেন।
Ext.create('Ext.panel.Panel', {
title: 'Media Queries Example',
width: 600,
height: 400,
html: 'Resize the window to see the panel resize!',
cls: 'media-query-panel',
renderTo: Ext.getBody()
});
// CSS (মিডিয়া কুয়েরি কনফিগারেশন):
<style>
.media-query-panel {
padding: 20px;
}
/* ছোট স্ক্রীন সাইজের জন্য */
@media (max-width: 600px) {
.media-query-panel {
background-color: lightblue;
font-size: 12px;
}
}
/* বড় স্ক্রীন সাইজের জন্য */
@media (min-width: 601px) {
.media-query-panel {
background-color: lightgreen;
font-size: 16px;
}
}
</style>
এখানে:
@media (max-width: 600px): এটি ছোট স্ক্রীনের জন্য মিডিয়া কুয়েরি।@media (min-width: 601px): এটি বড় স্ক্রীনের জন্য মিডিয়া কুয়েরি।এই CSS কনফিগারেশনটি প্যানেলের ব্যাকগ্রাউন্ড এবং ফন্ট সাইজ পরিবর্তন করবে, যখন স্ক্রীন সাইজ 600px এর নিচে বা উপরে যাবে।
ExtJS এ Responsive Layout কনফিগারেশন ব্যবহার করে একটি কম্পোনেন্টের সাইজ এবং অবস্থান স্ক্রীনের আকার অনুসারে পরিবর্তিত করা যেতে পারে। responsive এবং responsiveConfig কনফিগারেশন ব্যবহার করে বিভিন্ন স্ক্রীনে কম্পোনেন্টের আচরণ পরিবর্তন করতে পারেন।
Ext.create('Ext.container.Viewport', {
layout: 'hbox',
items: [{
xtype: 'panel',
title: 'Panel 1',
html: 'This is the first panel.',
width: 300,
responsiveConfig: {
'width < 500': {
html: 'Panel 1 - Small Screen'
},
'width >= 500': {
html: 'Panel 1 - Large Screen'
}
}
}, {
xtype: 'panel',
title: 'Panel 2',
html: 'This is the second panel.',
width: 300,
responsiveConfig: {
'width < 500': {
html: 'Panel 2 - Small Screen'
},
'width >= 500': {
html: 'Panel 2 - Large Screen'
}
}
}]
});
এখানে:
responsiveConfig এর মাধ্যমে রেসপন্সিভভাবে কনফিগার করা হয়েছে। স্ক্রীন সাইজ অনুযায়ী এই প্যানেলগুলির কন্টেন্ট এবং আকার পরিবর্তিত হবে।Responsive Grid ব্যবহারের মাধ্যমে, আপনি ExtJS গ্রিডকে বিভিন্ন স্ক্রীন সাইজ অনুসারে অ্যাডজাস্ট করতে পারেন।
Ext.create('Ext.grid.Panel', {
title: 'Responsive Grid Example',
store: {
fields: ['name', 'email'],
data: [
{name: 'John', email: 'john@example.com'},
{name: 'Jane', email: 'jane@example.com'}
]
},
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Email',
dataIndex: 'email',
flex: 2
}],
responsiveConfig: {
'width < 600': {
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 2
}]
},
'width >= 600': {
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Email',
dataIndex: 'email',
flex: 2
}]
}
},
renderTo: Ext.getBody()
});
এখানে, responsiveConfig এর মাধ্যমে স্ক্রীনের প্রস্থ অনুসারে গ্রিডের কলামগুলির সংখ্যা পরিবর্তিত হচ্ছে।
responsiveConfig এবং responsive কনফিগারেশন ব্যবহার করে কম্পোনেন্টগুলিকে স্ক্রীনের আকার অনুযায়ী পরিবর্তিত করা যায়।এই ফিচারগুলির মাধ্যমে, আপনি ExtJS এ একটি রেসপন্সিভ, ডিভাইস-বান্ধব এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে পারবেন যা বিভিন্ন স্ক্রীন সাইজে ভালভাবে কাজ করবে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
